<!-- 添加自选股按钮 -->
<template>
  <div class="home">
    <!-- 直播轮播图 -->
    <Banner></Banner>
    <!-- 解盘观点速递 -->
    <ViewsCard ref="views"></ViewsCard>
    <!-- 操盘秘籍日刊 -->
    <JournalCard></JournalCard>
    <!-- 操盘实战课程 -->
    <CourseCard ref="course"></CourseCard>
    <!-- 其他基础课程 -->
    <GiveCourse></GiveCourse>
    <div id="helperForProd"></div>
  </div>
</template>

<script>
import ViewsCard from '@/components/ViewsCard.vue';
import Banner from '@/components/live/Banner.vue';
import JournalCard from '@/components/JournalCard.vue';
import CourseCard from '@/components/CourseCard.vue';
import GiveCourse from '@/components/GiveCourse.vue';
import query from '@/lib/query.js';
export default {
  components: { ViewsCard, JournalCard, CourseCard, Banner, GiveCourse },
  name: 'Home',
  data() {
    return {
      hasLiveAuth: false,
      // 标题列表
      tabsList: [],
      //  内容列表，为了区分本地加入的数据和原数据
      liveInfoList: [],
      tabAuth: false,
    };
  },
  created() {
    this.$pageStatus.loading();
    window.statConf.page(_Global.stat.home);
  },
  mounted() {
    this.initHelper();
    this.initPage();
  },
  methods: {
    // 图文直播和课程的tab标签存在复用
    initPage() {
      query
        .getWordLiveInfo()
        .then(res => {
          const authList = [];
          const noAuthList = [];
          const authDataList = [];
          const noAuthDataList = [];
          if (res.data) {
            // 前端排序，有权限的在前
            res.data.forEach(e => {
              const row = {
                name: e.product_name,
                id: _Global.tabMap[e.sid] || 'default',
              };
              if (e.have_permission) {
                authList.push(row);
                authDataList.push(e);
              } else {
                noAuthList.push(row);
                noAuthDataList.push(e);
              }
            });
            if (authList.length) {
              this.tabAuth = true;
            }
            this.tabsList = authList.concat(noAuthList);
            this.liveInfoList = authDataList.concat(noAuthDataList);
            this.setChildren();
          }
        })
        .catch(err => {
          this.catchErrHandler(err);
        });
    },
    // 偏外部逻辑，由于有两个参数，不用watch处理
    setChildren() {
      const { views, course } = this.$refs;
      // 无权限不展示
      if (views && this.tabAuth) {
        views.init(this.tabsList, this.liveInfoList);
      }
      if (course) {
        course.init(this.tabsList, this.liveInfoList);
      }
    },
    initHelper() {
      // 初始化反馈助手
      return new window.HelperForProd({
        // 组件根节点（必填）
        el: '#helperForProd',
        // 埋点数据（必填）
        stat: {
          pageId: 'mob_web_charge_cpmj',
          ext: {
            url_ver: 'yrg-2517',
          },
        },
        // 产品sid（不写则会默认通过 url 判断，最好加上）
        sid: '471',
        // 语音助手问句id（默认为空不显示客服助手）
        comefrom: '57',
        // 主题颜色版本号（默认为1, 最新为2）
        themeVersion: 2,
        // 白天/夜间模式（默认为 白天）
        themeMode: 'white',
        extension: [],
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ #helperForProd {
  .hfp-box {
    ul {
      border: none;
      box-shadow: none;
      li {
        border: none;
      }
    }
  }
}
/deep/ .helper-for-prod {
  padding-top: 0.16rem;
  .hfp-box {
    border-radius: 0.12rem;
    padding: 0.32rem 0.2rem;
    h2 {
      font-weight: 600;
      font-size: 0.32rem;
      line-height: 0.4rem;
    }
  }
  .hfp-box ul {
    margin-top: 0.24rem;
  }
  .hfp-ext {
    margin-bottom: 0;
  }
}
.home {
  padding: 0 0.12rem 0;
}

.bottom-placeholder {
  padding-bottom: 0.68rem;
}
</style>
